 var box=document.getElementById('box');
 var wrap=document.getElementById('wrap');
 var left=document.getElementById('left');
 var right=document.getElementById('right');
 var list=document.getElementById('list').children;
 var num=0;
 var timer;
 function fn(){
     timer=setInterval(function(){
         num++;
         if(num>3){
             num=0;
         }
         box.style.transform='translate('+(-700*num)+'px)';
         for(var i=0;i<list.length;i++){
             list[i].className='';
         }
         list[num].className='get'

     },1000)
 }
 fn()
 wrap.onmouseenter=function(){
     clearInterval(timer)
 }
 wrap.onmouseleave=function(){
     fn()
 }
 for(var n=0;n<list.length;n++){
     list[n].omg=n;
     list[n].onclick=function(){
         for(var i=0;i<list.length;i++){
             list[i].className='';

         }
         this.className='get'
         num=this.omg
         box.style.transform='translate('+(-700*num)+'px)';
     }
 }
 right.onclick=function(){
         num++;
         if(num>3){
             num=0;
         }
         box.style.transform='translate('+(-700*num)+'px)';
         for(var i=0;i<list.length;i++){
             list[i].className='';
         }
         list[num].className='get'                   
 }
 left.onclick=function(){
         num--;
         if(num<0){
             num=3;
         }
         box.style.transform='translate('+(-700*num)+'px)';
         for(var i=0;i<list.length;i++){
             list[i].className='';
         }
         list[num].className='get'    
 }